<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小区物业管理系统 - 小区管理</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af',
                        secondary: '#3b82f6',
                        accent: '#60a5fa',
                        light: '#f3f4f6',
                        dark: '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .card {
                @apply bg-white rounded-md shadow-sm border border-gray-100;
            }
            .card-header {
                @apply p-4 border-b border-gray-100 font-medium text-gray-700 flex items-center justify-between;
            }
            .card-body {
                @apply p-4;
            }
            .nav-link {
                @apply flex items-center px-4 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all-300;
            }
            .nav-link.active {
                @apply bg-blue-50 text-blue-600;
            }
            .nav-link i {
                @apply mr-3;
            }
            .btn {
                @apply px-4 py-2 rounded-md font-medium transition-all-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
            }
            .btn-primary {
                @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
            }
            .btn-outline {
                @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
            }
            .btn-sm {
                @apply px-3 py-1 text-sm;
            }
            .badge {
                @apply px-2 py-1 text-xs font-medium rounded-full;
            }
            .badge-success {
                @apply bg-green-100 text-green-800;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-800;
            }
            .badge-danger {
                @apply bg-red-100 text-red-800;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-800;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-all-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边导航栏 -->
        <aside class="w-64 bg-white shadow-sm hidden md:block">
            <!-- Logo -->
            <div class="flex items-center justify-center h-16 border-b border-gray-100">
                <div class="flex items-center">
                    <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/c70bc843c62648c5ac1442b15138cda2~tplv-a9rns2rl98-image.image?rcl=20251027174223B6A1FC2217E476B2DCF3&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764150165&x-signature=fvtwF014Si8DyDXCBMppvkase%2BI%3D" 
                         alt="Property Management System Logo" 
                         class="w-8 h-8 mr-2">
                    <span class="text-lg font-semibold text-gray-800">物业管理系统</span>
                </div>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="p-4 space-y-1">
                <a href="dashboard.html" class="nav-link" data-target="dashboard-section">
                    <i class="fa fa-dashboard"></i>
                    <span>控制面板</span>
                </a>
                <a href="community.html" class="nav-link active" data-target="community-section">
                    <i class="fa fa-building"></i>
                    <span>小区管理</span>
                </a>
                <a href="owners.html" class="nav-link" data-target="owners-section">
                    <i class="fa fa-users"></i>
                    <span>业主管理</span>
                </a>
                <a href="users.html" class="nav-link" data-target="users-section">
                    <i class="fa fa-user-circle"></i>
                    <span>用户管理</span>
                </a>
                <a href="maintenance.html" class="nav-link" data-target="maintenance-section">
                    <i class="fa fa-wrench"></i>
                    <span>报修管理</span>
                </a>
                <a href="announcements.html" class="nav-link" data-target="announcements-section">
                    <i class="fa fa-bullhorn"></i>
                    <span>公告管理</span>
                </a>
                <a href="fee_management.html" class="nav-link" data-target="fee-section">
                    <i class="fa fa-credit-card"></i>
                    <span>物业收费管理</span>
                </a>
                <a href="settings.html" class="nav-link" data-target="settings-section">
                    <i class="fa fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </nav>
        </aside>
        
        <!-- 主内容区域 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm z-10">
                <div class="flex items-center justify-between h-16 px-6">
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-button" class="md:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
                        <i class="fa fa-bars"></i>
                    </button>
                    
                    <!-- 搜索框 -->
                    <div class="flex-1 max-w-md ml-4 md:ml-8">
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                <i class="fa fa-search text-gray-400"></i>
                            </span>
                            <input type="text" placeholder="搜索..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                    </div>
                    
                    <!-- 用户菜单 -->
                    <div class="flex items-center space-x-4">
                        <!-- 通知 -->
                        <button class="relative text-gray-500 hover:text-gray-700 focus:outline-none">
                            <i class="fa fa-bell"></i>
                            <span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
                        </button>
                        
                        <!-- 用户头像 -->
                        <div class="relative">
                            <button id="user-menu-button" class="flex items-center focus:outline-none">
                                <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
                                    <i class="fa fa-user"></i>
                                </div>
                                <span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">管理员</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-400 hidden md:block"></i>
                            </button>
                            
                            <!-- 用户下拉菜单 -->
                            <div id="user-menu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20 hidden">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                                <div class="border-t border-gray-100"></div>
                                <a href="login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 移动端侧边栏 -->
            <div id="mobile-sidebar" class="fixed inset-0 z-40 hidden">
                <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
                <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
                    <div class="absolute top-0 right-0 -mr-12 pt-2">
                        <button id="close-sidebar-button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                            <i class="fa fa-times text-white"></i>
                        </button>
                    </div>
                    <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                        <div class="flex-shrink-0 flex items-center justify-center">
                            <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/c70bc843c62648c5ac1442b15138cda2~tplv-a9rns2rl98-image.image?rcl=20251027174223B6A1FC2217E476B2DCF3&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764150165&x-signature=fvtwF014Si8DyDXCBMppvkase%2BI%3D" 
                                 alt="Property Management System Logo" 
                                 class="h-12 w-12">
                        </div>
                        <nav class="mt-5 px-2 space-y-1">
                            <a href="dashboard.html" class="nav-link" data-target="dashboard-section">
                                <i class="fa fa-dashboard"></i>
                                <span>控制面板</span>
                            </a>
                            <a href="community.html" class="nav-link active" data-target="community-section">
                                <i class="fa fa-building"></i>
                                <span>小区管理</span>
                            </a>
                            <a href="owners.html" class="nav-link" data-target="owners-section">
                                <i class="fa fa-users"></i>
                                <span>业主管理</span>
                            </a>
                            <a href="maintenance.html" class="nav-link" data-target="maintenance-section">
                                <i class="fa fa-wrench"></i>
                                <span>报修管理</span>
                            </a>
                            <a href="announcements.html" class="nav-link" data-target="announcements-section">
                                <i class="fa fa-bullhorn"></i>
                                <span>公告管理</span>
                            </a>
                            <a href="fee_management.html" class="nav-link" data-target="fee-section">
                                <i class="fa fa-credit-card"></i>
                                <span>物业收费管理</span>
                            </a>
                            <a href="settings.html" class="nav-link" data-target="settings-section">
                                <i class="fa fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
            
            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
                <!-- 小区管理 -->
                <section id="community-section" class="space-y-6">
                    <div class="flex items-center justify-between">
                        <h1 class="text-2xl font-bold text-gray-800">小区管理</h1>
                        <button id="add-community-button" class="btn btn-primary">
                            <i class="fa fa-plus mr-2"></i>
                            添加小区
                        </button>
                    </div>
                    
                    <!-- 小区列表 -->
                    <div class="card">
                        <div class="card-header">
                            <h3>小区列表</h3>
                            <div class="flex items-center space-x-2">
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                        <i class="fa fa-search text-gray-400"></i>
                                    </span>
                                    <input type="text" placeholder="搜索小区..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                <button class="btn btn-sm btn-outline">
                                    <i class="fa fa-filter"></i>
                                </button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小区名称</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">地址</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">楼栋数</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单元数</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总户数</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr class="table-row-hover">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">阳光花园</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-900">北京市朝阳区阳光路123号</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            8
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            32
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            384
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">编辑</a>
                                            <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="table-row-hover">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">和谐家园</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-900">北京市海淀区和谐路456号</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            12
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            48
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            576
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">编辑</a>
                                            <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                                        </td>
                                    </tr>
                                    <tr class="table-row-hover">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">幸福小区</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-900">北京市丰台区幸福路789号</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            6
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            24
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            288
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">编辑</a>
                                            <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-200">
                            <div class="flex items-center justify-between">
                                <div class="text-sm text-gray-700">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 共 <span class="font-medium">3</span> 条结果
                                </div>
                                <div class="flex space-x-2">
                                    <button class="btn btn-sm btn-outline" disabled>
                                        <i class="fa fa-chevron-left"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary">1</button>
                                    <button class="btn btn-sm-sm btn-outline" disabled>
                                        <i class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>

    <script>
        // 从后端API获取小区数据的函数 - 确保在调用前定义
        function fetchCommunities() {
            const communityTableBody = document.querySelector('tbody');
            if (!communityTableBody) return;

            // 发送GET请求到后端API获取所有小区数据
            fetch('/api/communities/', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取小区数据失败');
                }
                return response.json();
            })
            .then(data => {
                // 清空表格内容
                communityTableBody.innerHTML = '';
                
                // 处理Django REST framework的分页数据结构
                const communities = data.results || data;
                
                // 遍历数据并添加到表格
                communities.forEach(community => {
                    const row = document.createElement('tr');
                    row.className = 'table-row-hover';
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">${community.name}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">${community.address}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ${community.building_count}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ${community.unit_count}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ${parseInt(community.house_count) || 0}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">编辑</a>
                            <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                        </td>
                    `;
                    communityTableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching communities:', error);
                alert('获取小区数据失败');
            });
        }

        // 获取CSRF令牌的辅助函数
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 移动端菜单按钮
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileSidebar = document.getElementById('mobile-sidebar');
            const closeSidebarButton = document.getElementById('close-sidebar-button');
            
            mobileMenuButton.addEventListener('click', function() {
                mobileSidebar.classList.remove('hidden');
            });
            
            closeSidebarButton.addEventListener('click', function() {
                mobileSidebar.classList.add('hidden');
            });
            
            // 用户菜单切换
            const userMenuButton = document.getElementById('user-menu-button');
            const userMenu = document.getElementById('user-menu');
            
            userMenuButton.addEventListener('click', function() {
                userMenu.classList.toggle('hidden');
            });
            
            // 点击页面其他地方关闭下拉菜单
            document.addEventListener('click', function(event) {
                if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
                    userMenu.classList.add('hidden');
                }
            });

            // 添加小区功能 - 连接到后端API
            // 不需要重新声明变量，直接检查现有变量是否存在

            // 打开模态框 - 修复按钮点击无反应问题
            const addCommunityBtn = document.getElementById('add-community-button');
            if (addCommunityBtn) {
                addCommunityBtn.addEventListener('click', function() {
                    console.log('添加小区按钮被点击');
                    const modal = document.getElementById('add-community-modal');
                    const form = document.getElementById('add-community-form');
                    if (modal) {
                        modal.classList.remove('hidden');
                        // 清空表单
                        if (form) {
                            form.reset();
                        }
                    }
                });
            } else {
                console.error('未找到添加小区按钮');
            }

            // 关闭模态框
            function closeModal() {
                const modal = document.getElementById('add-community-modal');
                if (modal) {
                    modal.classList.add('hidden');
                }
            }

            const closeModalBtn = document.getElementById('close-modal-button');
            if (closeModalBtn) {
                closeModalBtn.addEventListener('click', closeModal);
            }
            
            const cancelAddBtn = document.getElementById('cancel-add-button');
            if (cancelAddBtn) {
                cancelAddBtn.addEventListener('click', closeModal);
            }

            // 点击背景关闭模态框
            const modal = document.getElementById('add-community-modal');
            if (modal) {
                modal.addEventListener('click', function(event) {
                    if (event.target === modal) {
                        closeModal();
                    }
                });
            }

            // 小区数据相关功能已在下方实现
            
            // 从后端API获取小区数据
            fetchCommunities();

            // 添加小区功能 - 连接到后端API
            const addCommunityButton = document.getElementById('add-community-button');
            const addCommunityModal = document.getElementById('add-community-modal');
            const closeModalButton = document.getElementById('close-modal-button');
            const cancelAddButton = document.getElementById('cancel-add-button');
            const submitAddButton = document.getElementById('submit-add-button');
            const addCommunityForm = document.getElementById('add-community-form');
            const successMessage = document.getElementById('success-message');
            const successText = document.getElementById('success-text');
            const communityTableBody = document.querySelector('tbody');

            // 打开模态框
            addCommunityButton.addEventListener('click', function() {
                addCommunityModal.classList.remove('hidden');
                // 清空表单
                addCommunityForm.reset();
            });

            // 关闭模态框
            function closeModal() {
                addCommunityModal.classList.add('hidden');
            }

            closeModalButton.addEventListener('click', closeModal);
            cancelAddButton.addEventListener('click', closeModal);

            // 点击背景关闭模态框
            addCommunityModal.addEventListener('click', function(event) {
                if (event.target === addCommunityModal) {
                    closeModal();
                }
            });

            // 保存小区数据 - 连接到后端API
            submitAddButton.addEventListener('click', function() {
                // 表单验证
                if (!addCommunityForm.checkValidity()) {
                    // 触发浏览器默认验证提示
                    addCommunityForm.reportValidity();
                    return;
                }

                // 获取表单数据
                const communityName = document.getElementById('community-name').value.trim();
                const communityAddress = document.getElementById('community-address').value.trim();
                const buildingCount = document.getElementById('building-count').value;
                const unitCount = document.getElementById('unit-count').value;
                const totalHouseholds = document.getElementById('total-households').value;
                const communityPhone = document.getElementById('community-phone').value.trim();
                const communityDescription = document.getElementById('community-description').value.trim();
                
                // 确保数值类型正确
                const parsedBuildingCount = parseInt(buildingCount) || 1;
                const parsedUnitCount = parseInt(unitCount) || 1;
                const parsedTotalHouseholds = parseInt(totalHouseholds) || 1;
                
                console.log('添加小区数据:', {
                    name: communityName,
                    address: communityAddress,
                    building_count: parsedBuildingCount,
                    unit_count: parsedUnitCount,
                    house_count: parsedTotalHouseholds,
                    phone: communityPhone,
                    description: communityDescription
                });
                
                // 准备发送到后端的数据
                const communityData = {
                    name: communityName,
                    address: communityAddress,
                    building_count: parsedBuildingCount,
                    unit_count: parsedUnitCount,
                    house_count: parsedTotalHouseholds,
                    phone: communityPhone,
                    description: communityDescription
                };
                
                // 发送POST请求到后端API
                fetch('/api/communities/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify(communityData)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('添加小区失败');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('API返回的数据完整结构:', JSON.stringify(data, null, 2));
                    console.log('数据字段检查 - house_count:', data.house_count, '类型:', typeof data.house_count);
                    
                    // 使用正确的数据库字段名
                    const totalHouseholds = data.house_count || 0;
                    const buildingCount = data.building_count || 0;
                    const unitCount = data.unit_count || 0;
                    
                    // 创建新的表格行
                    const newRow = document.createElement('tr');
                    newRow.className = 'table-row-hover';
                    newRow.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">${data.name}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">${data.address}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ${parseInt(buildingCount) || 0}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ${parseInt(unitCount) || 0}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ${parseInt(totalHouseholds) || 0}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3 view-community" data-id="${data.id}">查看</a>
                            <a href="#" class="text-green-600 hover:text-green-900 mr-3 edit-community" data-id="${data.id}">编辑</a>
                            <a href="#" class="text-red-600 hover:text-red-900 delete-community" data-id="${data.id}">删除</a>
                        </td>
                    `;

                    // 添加到表格
                    communityTableBody.appendChild(newRow);

                    // 重新绑定事件监听器
                    attachEventListeners();

                    // 显示成功消息
                    successText.textContent = '小区添加成功';
                    successMessage.classList.remove('hidden');
                    
                    // 3秒后隐藏成功消息
                    setTimeout(() => {
                        successMessage.classList.add('hidden');
                    }, 3000);

                    // 关闭模态框
                    closeModal();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('添加小区失败，请重试');
                });
            });
            
            // 获取CSRF令牌的辅助函数
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            
            // 从后端API获取小区数据的函数
            function fetchCommunities() {
                const communityTableBody = document.querySelector('tbody');
                if (!communityTableBody) return;

                // 发送GET请求到后端API获取所有小区数据
                fetch('/api/communities/', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取小区数据失败');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('获取小区数据完整结构:', JSON.stringify(data, null, 2));
                    // 清空表格内容
                    communityTableBody.innerHTML = '';
                    
                    // 处理Django REST framework的分页数据结构
                    const communities = data.results || data;
                    
                    // 遍历数据并添加到表格
                    communities.forEach(community => {
                        console.log('小区详情数据:', JSON.stringify(community, null, 2));
                        console.log('小区字段检查 - house_count:', community.house_count, '类型:', typeof community.house_count);
                        
                        // 使用正确的数据库字段名
                        const totalHouseholds = community.house_count || 0;
                        const buildingCount = community.building_count || 0;
                        const unitCount = community.unit_count || 0;
                        
                        const row = document.createElement('tr');
                        row.className = 'table-row-hover';
                        row.innerHTML = `
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">${community.name}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">${community.address}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${parseInt(buildingCount) || 0}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${parseInt(unitCount) || 0}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${parseInt(totalHouseholds) || 0}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3 view-community" data-id="${community.id}">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900 mr-3 edit-community" data-id="${community.id}">编辑</a>
                                <a href="#" class="text-red-600 hover:text-red-900 delete-community" data-id="${community.id}">删除</a>
                            </td>
                        `;
                        communityTableBody.appendChild(row);
                    });

                    // 添加事件监听器
                    attachEventListeners();
                })
                .catch(error => {
                    console.error('Error fetching communities:', error);
                    // 如果API调用失败，为静态数据添加事件监听器
                    setTimeout(() => {
                        attachEventListeners();
                    }, 100);
                });
            }

            // 查看小区详情功能
            const viewCommunityModal = document.getElementById('view-community-modal');
            const closeViewModalButton = document.getElementById('close-view-modal-button');
            const closeViewModalBtn = document.getElementById('close-view-modal-btn');

            function openViewModal(communityId) {
                // 从后端API获取小区详情
                fetch(`/api/communities/${communityId}/`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取小区详情失败');
                    }
                    return response.json();
                })
                .then(community => {
                    console.log('查看小区详情数据结构:', JSON.stringify(community, null, 2));
                    // 处理可能存在的字段名称不一致问题
                    const totalHouseholds = community.house_count || 0;
                    const buildingCount = community.building_count || 0;
                    const unitCount = community.unit_count || 0;
                    
                    // 填充详情信息
                    document.getElementById('view-community-name').textContent = community.name || '无';
                    document.getElementById('view-community-phone').textContent = community.phone || '无';
                    document.getElementById('view-community-address').textContent = community.address || '无';
                    document.getElementById('view-building-count').textContent = buildingCount || '0';
                    document.getElementById('view-unit-count').textContent = unitCount || '0';
                    document.getElementById('view-total-households').textContent = totalHouseholds || '0';
                    document.getElementById('view-community-description').textContent = community.description || '无';

                    // 显示模态框
                    viewCommunityModal.classList.remove('hidden');
                })
                .catch(error => {
                    console.error('Error viewing community:', error);
                    alert('查看小区详情失败，请重试');
                });
            }

            function closeViewModal() {
                viewCommunityModal.classList.add('hidden');
            }

            // 关闭模态框事件
            closeViewModalButton.addEventListener('click', closeViewModal);
            closeViewModalBtn.addEventListener('click', closeViewModal);

            // 点击背景关闭模态框
            viewCommunityModal.addEventListener('click', function(event) {
                if (event.target === viewCommunityModal) {
                    closeViewModal();
                }
            });

            // 编辑小区功能
            const editCommunityModal = document.getElementById('edit-community-modal');
            const closeEditModalButton = document.getElementById('close-edit-modal-button');
            const cancelEditButton = document.getElementById('cancel-edit-button');
            const submitEditButton = document.getElementById('submit-edit-button');
            const editCommunityForm = document.getElementById('edit-community-form');

            function openEditModal(communityId) {
                // 从后端API获取小区详情
                fetch(`/api/communities/${communityId}/`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取小区详情失败');
                    }
                    return response.json();
                })
                .then(community => {
                    console.log('编辑小区详情数据结构:', JSON.stringify(community, null, 2));
                    // 使用正确的数据库字段名
                    const totalHouseholds = community.house_count || 1;
                    const buildingCount = community.building_count || 1;
                    const unitCount = community.unit_count || 1;
                    
                    // 填充表单数据
                    document.getElementById('edit-community-id').value = community.id;
                    document.getElementById('edit-community-name').value = community.name || '';
                    document.getElementById('edit-community-phone').value = community.phone || '';
                    document.getElementById('edit-community-address').value = community.address || '';
                    document.getElementById('edit-building-count').value = buildingCount || 1;
                    document.getElementById('edit-unit-count').value = unitCount || 1;
                    document.getElementById('edit-total-households').value = totalHouseholds || 1;
                    document.getElementById('edit-community-description').value = community.description || '';

                    // 显示模态框
                    editCommunityModal.classList.remove('hidden');
                })
                .catch(error => {
                    console.error('Error editing community:', error);
                    alert('编辑小区失败，请重试');
                });
            }

            function closeEditModal() {
                editCommunityModal.classList.add('hidden');
                editCommunityForm.reset();
            }

            // 关闭模态框事件
            closeEditModalButton.addEventListener('click', closeEditModal);
            cancelEditButton.addEventListener('click', closeEditModal);

            // 点击背景关闭模态框
            editCommunityModal.addEventListener('click', function(event) {
                if (event.target === editCommunityModal) {
                    closeEditModal();
                }
            });

            // 保存编辑的小区数据
            submitEditButton.addEventListener('click', function() {
                // 表单验证
                if (!editCommunityForm.checkValidity()) {
                    // 触发浏览器默认验证提示
                    editCommunityForm.reportValidity();
                    return;
                }

                // 获取表单数据
                const communityId = document.getElementById('edit-community-id').value;
                const communityName = document.getElementById('edit-community-name').value.trim();
                const communityPhone = document.getElementById('edit-community-phone').value.trim();
                const communityAddress = document.getElementById('edit-community-address').value.trim();
                const buildingCount = document.getElementById('edit-building-count').value;
                const unitCount = document.getElementById('edit-unit-count').value;
                const totalHouseholds = document.getElementById('edit-total-households').value;
                const description = document.getElementById('edit-community-description').value.trim();
                
                // 准备发送到后端的数据
                const communityData = {
                    name: communityName,
                    phone: communityPhone,
                    address: communityAddress,
                    building_count: parseInt(buildingCount),
                    unit_count: parseInt(unitCount),
                    house_count: parseInt(totalHouseholds),
                    description: description
                };
                
                // 发送PUT请求到后端API
                fetch(`/api/communities/${communityId}/`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify(communityData)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('更新小区失败');
                    }
                    return response.json();
                })
                .then(data => {
                    // 更新成功，刷新数据
                    fetchCommunities();

                    // 显示成功消息
                    const successTextEl = document.getElementById('success-text');
                    const successMessageEl = document.getElementById('success-message');
                    if (successTextEl && successMessageEl) {
                        successTextEl.textContent = '小区更新成功';
                        successMessageEl.classList.remove('hidden');
                        
                        // 3秒后隐藏成功消息
                        setTimeout(() => {
                            successMessageEl.classList.add('hidden');
                        }, 3000);
                    }

                    // 关闭模态框
                    closeEditModal();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('更新小区失败，请重试');
                });
            });

            // 删除小区功能
            const deleteCommunityModal = document.getElementById('delete-community-modal');
            const closeDeleteModalButton = document.getElementById('close-delete-modal-button');
            const cancelDeleteButton = document.getElementById('cancel-delete-button');
            const confirmDeleteButton = document.getElementById('confirm-delete-button');

            function openDeleteModal(communityId) {
                // 设置要删除的小区ID
                document.getElementById('delete-community-id').value = communityId;
                // 显示模态框
                deleteCommunityModal.classList.remove('hidden');
            }

            function closeDeleteModal() {
                deleteCommunityModal.classList.add('hidden');
            }

            // 关闭模态框事件
            closeDeleteModalButton.addEventListener('click', closeDeleteModal);
            cancelDeleteButton.addEventListener('click', closeDeleteModal);

            // 点击背景关闭模态框
            deleteCommunityModal.addEventListener('click', function(event) {
                if (event.target === deleteCommunityModal) {
                    closeDeleteModal();
                }
            });

            // 确认删除小区
            confirmDeleteButton.addEventListener('click', function() {
                const communityId = document.getElementById('delete-community-id').value;
                
                // 发送DELETE请求到后端API
                fetch(`/api/communities/${communityId}/`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('删除小区失败');
                    }
                    return response.json().catch(() => ({})); // 处理可能没有响应体的情况
                })
                .then(() => {
                    // 删除成功，刷新数据
                    fetchCommunities();

                    // 显示成功消息
                    const successTextEl = document.getElementById('success-text');
                    const successMessageEl = document.getElementById('success-message');
                    if (successTextEl && successMessageEl) {
                        successTextEl.textContent = '小区删除成功';
                        successMessageEl.classList.remove('hidden');
                        
                        // 3秒后隐藏成功消息
                        setTimeout(() => {
                            successMessageEl.classList.add('hidden');
                        }, 3000);
                    }

                    // 关闭模态框
                    closeDeleteModal();
                })
                .catch(error => {
                    console.error('Error deleting community:', error);
                    alert('删除小区失败，请重试');
                });
            });

            // 添加事件监听器函数
            function attachEventListeners() {
                // 查看按钮事件
                document.querySelectorAll('.view-community').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        const communityId = this.getAttribute('data-id');
                        openViewModal(communityId);
                    });
                });

                // 编辑按钮事件
                document.querySelectorAll('.edit-community').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        const communityId = this.getAttribute('data-id');
                        openEditModal(communityId);
                    });
                });

                // 删除按钮事件
                document.querySelectorAll('.delete-community').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        const communityId = this.getAttribute('data-id');
                        openDeleteModal(communityId);
                    });
                });
            }
        });
    </script>

    <!-- 添加小区模态框 -->
    <div id="add-community-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <!-- 背景遮罩 -->
            <div class="fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity"></div>
            
            <!-- 模态框内容 -->
            <div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl">
                <!-- 模态框头部 -->
                <div class="flex items-center justify-between p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">添加小区</h3>
                    <button id="close-modal-button" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 模态框主体 - 表单 -->
                <div class="p-6">
                    <form id="add-community-form" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="community-name" class="block text-sm font-medium text-gray-700 mb-1">小区名称 <span class="text-red-500">*</span></label>
                                <input type="text" id="community-name" name="community-name" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="community-address" class="block text-sm font-medium text-gray-700 mb-1">地址 <span class="text-red-500">*</span></label>
                                <input type="text" id="community-address" name="community-address" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="building-count" class="block text-sm font-medium text-gray-700 mb-1">楼栋数 <span class="text-red-500">*</span></label>
                                <input type="number" id="building-count" name="building-count" required min="1"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="unit-count" class="block text-sm font-medium text-gray-700 mb-1">单元数 <span class="text-red-500">*</span></label>
                                <input type="number" id="unit-count" name="unit-count" required min="1"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="total-households" class="block text-sm font-medium text-gray-700 mb-1">总户数 <span class="text-red-500">*</span></label>
                                <input type="number" id="total-households" name="total-households" required min="1"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="community-phone" class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                                <input type="tel" id="community-phone" name="community-phone"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                        </div>
                        <div>
                            <label for="community-description" class="block text-sm font-medium text-gray-700 mb-1">小区描述</label>
                            <textarea id="community-description" name="community-description" rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                        </div>
                    </form>
                </div>
                
                <!-- 模态框底部 - 按钮 -->
                <div class="flex items-center justify-end p-6 border-t border-gray-200 space-x-3">
                    <button id="cancel-add-button" class="btn btn-outline">
                        取消
                    </button>
                    <button id="submit-add-button" class="btn btn-primary">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看小区详情模态框 -->
    <div id="view-community-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <!-- 背景遮罩 -->
            <div class="fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity"></div>
            
            <!-- 模态框内容 -->
            <div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl">
                <!-- 模态框头部 -->
                <div class="flex items-center justify-between p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">小区详情</h3>
                    <button id="close-view-modal-button" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 模态框主体 - 详情信息 -->
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">小区名称</label>
                            <div id="view-community-name" class="text-lg font-semibold text-gray-900"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">联系电话</label>
                            <div id="view-community-phone" class="text-gray-900"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">地址</label>
                            <div id="view-community-address" class="text-gray-900"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">楼栋数</label>
                            <div id="view-building-count" class="text-gray-900"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">单元数</label>
                            <div id="view-unit-count" class="text-gray-900"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">总户数</label>
                            <div id="view-total-households" class="text-gray-900"></div>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-500 mb-1">小区描述</label>
                            <div id="view-community-description" class="text-gray-900 min-h-[60px]"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 模态框底部 -->
                <div class="flex items-center justify-end p-6 border-t border-gray-200">
                    <button id="close-view-modal-btn" class="btn btn-primary">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑小区模态框 -->
    <div id="edit-community-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <!-- 背景遮罩 -->
            <div class="fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity"></div>
            
            <!-- 模态框内容 -->
            <div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl">
                <!-- 模态框头部 -->
                <div class="flex items-center justify-between p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">编辑小区</h3>
                    <button id="close-edit-modal-button" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 模态框主体 - 表单 -->
                <div class="p-6">
                    <form id="edit-community-form" class="space-y-4">
                        <input type="hidden" id="edit-community-id">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="edit-community-name" class="block text-sm font-medium text-gray-700 mb-1">小区名称 <span class="text-red-500">*</span></label>
                                <input type="text" id="edit-community-name" name="edit-community-name" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="edit-community-phone" class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                                <input type="tel" id="edit-community-phone" name="edit-community-phone"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="edit-community-address" class="block text-sm font-medium text-gray-700 mb-1">地址 <span class="text-red-500">*</span></label>
                                <input type="text" id="edit-community-address" name="edit-community-address" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="edit-building-count" class="block text-sm font-medium text-gray-700 mb-1">楼栋数 <span class="text-red-500">*</span></label>
                                <input type="number" id="edit-building-count" name="edit-building-count" required min="1"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="edit-unit-count" class="block text-sm font-medium text-gray-700 mb-1">单元数 <span class="text-red-500">*</span></label>
                                <input type="number" id="edit-unit-count" name="edit-unit-count" required min="1"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <div>
                                <label for="edit-total-households" class="block text-sm font-medium text-gray-700 mb-1">总户数 <span class="text-red-500">*</span></label>
                                <input type="number" id="edit-total-households" name="edit-total-households" required min="1"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                        </div>
                        <div>
                            <label for="edit-community-description" class="block text-sm font-medium text-gray-700 mb-1">小区描述</label>
                            <textarea id="edit-community-description" name="edit-community-description" rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                        </div>
                    </form>
                </div>
                
                <!-- 模态框底部 - 按钮 -->
                <div class="flex items-center justify-end p-6 border-t border-gray-200 space-x-3">
                    <button id="cancel-edit-button" class="btn btn-outline">
                        取消
                    </button>
                    <button id="submit-edit-button" class="btn btn-primary">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="delete-community-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <!-- 背景遮罩 -->
            <div class="fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity"></div>
            
            <!-- 模态框内容 -->
            <div class="relative bg-white rounded-lg shadow-xl w-full max-w-md">
                <!-- 模态框头部 -->
                <div class="flex items-center justify-between p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">确认删除</h3>
                    <button id="close-delete-modal-button" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 模态框主体 -->
                <div class="p-6">
                    <input type="hidden" id="delete-community-id">
                    <div class="text-center mb-4">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
                            <i class="fa fa-exclamation-triangle text-2xl text-red-500"></i>
                        </div>
                        <p class="text-gray-700">确定要删除这个小区吗？</p>
                        <p class="text-gray-500 mt-2 text-sm">此操作不可撤销，删除后数据将无法恢复。</p>
                    </div>
                </div>
                
                <!-- 模态框底部 - 按钮 -->
                <div class="flex items-center justify-center p-6 border-t border-gray-200 space-x-3">
                    <button id="cancel-delete-button" class="btn btn-outline">
                        取消
                    </button>
                    <button id="confirm-delete-button" class="btn btn-danger">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 成功提示消息 -->
    <div id="success-message" class="fixed bottom-5 right-5 bg-green-500 text-white px-4 py-3 rounded-md shadow-lg hidden">
        <div class="flex items-center">
            <i class="fa fa-check-circle mr-2"></i>
            <span id="success-text">操作成功</span>
        </div>
    </div>
</body>
</html>